Tip: Open the app and check the Tool tab in the right panel for tool-specific shortcuts and tips. Each tool shows contextual controls and keyboard shortcuts when selected.

Getting Started

1. Open index.html in a modern browser (Chrome, Firefox, Edge, Safari)
2. Name your project on the start screen (or leave as "Untitled Project")
3. Click New Project to begin, or Open Project to load a .nvec file
4. Set your scene dimensions and frame rate - the timeline appears at the bottom

Keyboard Shortcuts

File Operations

Shortcut	Action
Ctrl+S	Save project (.nvec)
Ctrl+O	Open project
Ctrl+Z	Undo
Ctrl+Shift+Z	Redo

Tool Selection

Key	Tool
V	Select Tool
H	Hand / Pan Tool
R	Rectangle
E	Ellipse
L	Line
P	Pen Tool
T	Text
I	Color Picker
A	Direct Select Tool (edit path vertices)
Z	Zoom Tool

Animation

Shortcut	Action
Space	Play / Pause animation
Home	Go to first frame
End	Go to last frame
← / →	Step one frame back / forward

Editing

Shortcut	Action
Ctrl+D	Duplicate selected shape
Delete / Backspace	Delete selected shape (or last pen point)
Escape	Deselect all / finish pen drawing / close panel

Modifier Keys

Modifier	Action
Space (hold)	Temporarily switch to Hand Tool for panning
Alt (hold, with Pen)	Convert Anchor mode - edit/add vertices on existing paths
Alt (with tangent drag)	Break tangent symmetry on motion path handles

Drawing Tools

Select Tool V

• Click a shape to select it
• Shift+click to multi-select
• Drag on empty canvas to marquee-select
• Drag selected shapes to move them
• Drag corner/edge handles to resize
• Drag rotation handle to rotate

Hand Tool H

• Drag to pan the canvas
• Also activated by holding Space with any other tool

Rectangle Tool R

• Click and drag to draw a rectangle
• Adjust corner radius via the R property or by dragging the radius handle

Ellipse Tool E

• Click and drag to draw an ellipse

Line Tool L

• Click and drag to draw a line

Pen Tool P

• Click to place anchor points
• Drag after clicking to create Bezier curve handles
• Click the first point to close the path
• Press Escape to finish an open path
• Press Delete/Backspace to remove the last placed point
• Ctrl+Z removes the last point during active drawing
• Alt modifier:
  • Alt+drag on a path segment to insert a new vertex
  • Alt+click a vertex to toggle smooth/corner handles

Text Tool T

• Click to place a text object
• Double-click an existing text to edit it
• Properties panel controls: font family, size, weight, style, alignment

Color Picker I

• Click any shape to sample its fill color
• Applied to currently selected shape(s)
• Auto-switches back to Select tool after picking

Direct Select Tool A

• Click a path shape to select individual vertices
• Drag a vertex to reposition it
• Alt+drag a path segment to insert a new vertex
• Ctrl+click a vertex to remove it
• Alt+drag a bezier handle to adjust the curve independently

Zoom Tool Z

• Click to zoom in
• Alt+click to zoom out
• Also use scroll wheel from any tool to zoom

Canvas Navigation

Action	Result
Scroll wheel	Zoom in/out
Hand Tool drag	Pan canvas
Space + drag	Pan canvas (temporary)
Right-click + drag	Pan canvas (stage area)
Middle-click + drag	Pan canvas
Pinch (touch)	Zoom in/out
Two-finger drag (touch)	Pan canvas

Shape Types

Drawing Tools

• Rectangle - with adjustable corner radius
• Ellipse - perfect circles and ovals
• Line - straight lines
• Path - freeform Bezier paths via the Pen tool
• Text - editable text with font controls

Preset Shapes (Shapes Menu)

• Triangle, Diamond, Pentagon, Hexagon, Star, Arrow

Special Layer Types

• Null / Controller - invisible layer used as a parent for grouping transforms
• Camera - defines a viewport for rendering and export
• Artboard - bounded canvas area with background colour

Cameras & Artboards

Camera

• Defines a render viewport - animate the camera to create pans, zooms, and follow shots
• Export renders everything inside the camera frame
• Keyframe position, size, and rotation like any other shape

Artboard Presets

Preset	Size
1080p	1920 × 1080
720p	1280 × 720
Instagram Post	1080 × 1080
Instagram Story	1080 × 1920
A4	2480 × 3508
Twitter/X Post	1200 × 675
YouTube Thumbnail	1280 × 720
Mobile	375 × 812

Properties Panel

Select a shape to see its properties on the right side panel. Every numeric property can be keyframed.

Transform

• X / Y - Position (linkable for uniform movement)
• W / H - Width and Height (linkable for proportional scaling)
• Rotation - Rotation angle in degrees
• Origin X / Y - Transform origin (anchor point)
• R - Corner radius (rectangles only)
• Opacity - Master opacity (0–1)

3D Properties when 3D enabled

• Z Depth - Position along the z-axis
• Rotation X - Pitch rotation around X-axis
• Rotation Y - Yaw rotation around Y-axis

Fill & Stroke

• Fill: colour picker, hex input, opacity slider, show/hide toggle
• Stroke: colour, width, opacity, dash pattern (Solid/Dashed/Dotted), line cap (Butt/Round/Square)
• Both fill and stroke colours are keyframeable

Parenting

• Parent dropdown to set a parent layer - child inherits parent transforms
• Parenting is synced bidirectionally with the node graph connections
• Children rotate around the parent's origin, not their own

Linking

• XY Link - changes to X automatically update Y and vice versa
• WH Link - changes to Width proportionally update Height (maintains aspect ratio)

Align & Distribute

Button	Action
L / CH / R	Align left / centre horizontal / right
T / CV / B	Align top / centre vertical / bottom

Single shape: Aligns to parent artboard (or canvas viewport).
Multiple shapes: Aligns relative to their combined bounding box.
Distribute (3+ shapes): Equal horizontal or vertical spacing.

Tool Properties Panel

Switch to the Tool tab in the right panel to access tool-specific settings alongside persistent view controls.

Per-Tool Info

• Select - shows selected shape name, position, and dimensions
• Direct Select - shows vertex count and selected vertex coordinates
• Pen - shows live point count, Open Path and Close Path buttons, plus the full shortcut guide
• Rect / Ellipse - shows last drawn shape dimensions, fill, and stroke colors
• Line - shows line length, stroke color, and width
• Text - shows font, size, color, and a text preview
• Color Picker - shows the sampled color with a copy hex button
• Hand / Zoom - shows current zoom level with reset and zoom in/out buttons

Onion Skin

Always visible in the Tool tab. Shows ghost frames at adjacent frames to help with timing and spacing.

• Before / After - number of frames to show before and after the current frame (0 to 5)
• Opacity - how visible the ghost frames are
• Frames before the current frame show in red; frames after show in blue

Lightbox

Always visible in the Tool tab. When enabled, non-selected shapes are dimmed so you can focus on the active layer.

• Dim - controls how much non-selected shapes are faded

Layers Panel

• Displays all shapes and artboards in draw order
• Click to select, drag to reorder
• Eye icon - Toggle visibility
• Lock icon - Toggle locked state
• Group button - Group selected shapes
• Artboards always render behind regular shapes

Animation & Timeline

Motion Loom features a full keyframe animation system inspired by After Effects.

Timeline

• Canvas-based timeline at the bottom of the screen with playhead scrubbing
• Click on the timeline ruler to jump to any frame
• Each layer shows as a row; expand a layer to see individual property tracks
• Only properties with keyframes appear in the expanded view - keeping the timeline clean
• The sidebar width is adjustable by dragging the resize handle between the layer list and the track area
• Duration can be displayed in frames or seconds - toggle with the f/s button next to the Dur input
• Work area markers (B/N) to define a loop/render range

Keyframing

• Click the diamond icon next to any property to add/remove a keyframe at the current frame
• Keyframes appear as diamonds on the timeline
• Drag keyframes on the timeline to retime them
• Supported easing curves: Linear, Ease In, Ease Out, Ease In-Out
• Right-click a keyframe to change its easing

Animatable Properties

Property	Notes
X, Y (Position)	Spatial bezier interpolation with motion paths
W, H (Size)	Can be linked for proportional scaling
Rotation	In degrees, supports multi-revolution
Opacity	0 to 1
Corner Radius	Rectangles only
Z, Rotation X/Y	Requires 3D layer mode
Fill / Stroke Colour	Smooth colour interpolation
Path Shape	Morph between path keyframes
Trim Path (Start/End/Offset)	Via path effects

Graph Editor

• Toggle the graph editor to view and edit value curves over time
• Visualise easing with editable bezier handles

Motion Paths

When a shape has position keyframes, a spatial bezier motion path is drawn on the canvas.

• Motion path appears when a shape has at least one position keyframe
• Parent-aware: paths are drawn in world space even for child layers
• White circle shows the current-frame interpolated position

Expressions

Attach JavaScript expressions to any animatable property for procedural animation.

Built-in Variables

Variable	Description
time	Current time in seconds
frame	Current frame number
value	The property's current value (keyframed or default)
index	Shape's index in the layer stack

Built-in Functions

Function	Description
wiggle(freq, amp)	Random oscillation at given frequency and amplitude
loop(type)	Loop keyframes: 'cycle', 'pingpong', 'offset'
linear(t, in1, in2, out1, out2)	Linear remap
ease(t, in1, in2, out1, out2)	Smooth ease remap
clamp(val, min, max)	Constrain value to range
degreesToRadians(d)	Convert degrees to radians
radiansToDegrees(r)	Convert radians to degrees

Examples

• wiggle(3, 25) - Jittery shake, 3 oscillations/sec, 25px amplitude
• Math.sin(time * 2) * 50 - Smooth sine wave oscillation
• loop('pingpong') - Bounce keyframes back and forth
• value + Math.sin(time * 4) * 10 - Add sine offset to keyframed value

2.5D / 3D Depth

Enable the 3D toggle on any layer to unlock depth and perspective rotation.

• Z Depth - Moves the layer along the depth axis. Uses perspective projection (configurable distance) for parallax effects.
• Rotation X - Tilts the layer forward/backward (pitch). Rendered with CSS perspective() and rotateX().
• Rotation Y - Rotates the layer left/right (yaw). Rendered with CSS perspective() and rotateY().
• All 3D properties are fully keyframeable and expression-compatible
• Perspective scale is applied so objects further away appear smaller

Scenes & Composition

Motion Loom supports multiple scenes within a single project, similar to After Effects compositions.

Scene Management

• Scene Panel - Click the Scenes button in the toolbar to open the floating scene manager
• Scene cards show name, dimensions, duration, and layer count
• Double-click a scene card to switch to it
• Right-click for context menu: rename, duplicate, delete, or insert as sub-scene

Sub-Scenes (Pre-comps)

• Insert any scene as a layer in another scene
• "Insert as sub-scene" creates a reference layer that renders the target scene
• Navigate into a sub-scene via breadcrumb navigation in the top bar
• Changes to the source scene are reflected everywhere it's used

Scene Selector

• Top bar dropdown to quickly switch between scenes
• "+ New Scene" button for quick creation

Node Graph & Effects

The bottom panel contains a visual node-based effect system. Every shape appears as a draggable node.

How It Works

1. Every shape appears as a node with output/input sockets
2. Click + Effect to add an effect node
3. Drag connections from shape output to effect input to apply
4. Effects are rendered via SVG filters in real-time
5. Parent connections: drag from a shape's output to another shape's parent socket to create a parent–child relationship
6. Mask connections: drag to the mask socket for luminance or clip masking

Available Effects

Effect	Parameters
Gaussian Blur	Radius
Drop Shadow	X, Y, Blur, Colour
Outer Glow	Radius, Colour
Inner Shadow	X, Y, Blur, Colour
Colour Overlay	Colour, Opacity
Noise / Distort	Amount, Frequency
Outline	Colour, Width
Opacity	Value (0–1)
Saturate	Value (0–2+)
Brightness	Slope, Intercept
Gradient Fill	Type (linear/radial), Colours, Angle
Trim Path	Start, End, Offset (see Path Effects)

Node Graph Controls

• Drag nodes to reposition
• Layout - Auto-arrange all nodes
• Fit - Zoom to fit all nodes in view
• +/− - Zoom node graph
• Right-click in the node area to pan
• Double-click a parent connection to disconnect

Path Effects (Trim Path)

Apply trim path effects to animate path drawing and reveal.

• Trim Start - Where the visible portion of the path begins (0–1)
• Trim End - Where the visible portion ends (0–1)
• Trim Offset - Rotates the trim range around the path
• Sliders update in real-time as you drag
• Each trim property has a keyframe button for animation
• Combine with loop('cycle') expressions for continuous drawing effects

Path Shape Keyframing

• Click Key Shape in the path properties to keyframe the entire path shape
• Create different path shapes at different frames to morph between them
• Interpolation handles per-point position and bezier control points

Saving & Exporting

Save Project

• Ctrl+S or click Save
• Saves as {ProjectName}_save{N}.nvec
• Save number increments each time
• File contains all scenes, shapes, keyframes, effects, connections, expressions, and metadata
• JSON format - human-readable and version-control friendly

Open Project

• Ctrl+O or click Open
• Backwards compatible: loads both motionloom-anim and legacy nodevector-anim formats

Export

• SVG - Full canvas or per-artboard/camera static SVG
• PNG - Camera view rasterised to PNG
• Animated HTML - Self-contained HTML player with the full animation
• Exported SVGs include embedded fonts and proper viewBox

Mouse Interactions

Action	Result
Left-click	Select / place point / activate button
Left-drag	Create shape / move shape / marquee select
Right-click + drag	Pan canvas (stage area)
Right-click	Context menu (on shapes, layers, scene cards)
Double-click	Edit text / rename layer / switch scene
Scroll wheel	Zoom canvas
Shift+click	Add to selection
Alt+drag (Pen)	Insert vertex on path segment
Alt+click (Pen)	Convert vertex smooth/corner
Alt+drag (Tangent)	Break spatial tangent symmetry

Mobile & Touch Support

• Fully responsive layout with bottom tab navigation
• Pinch to zoom, two-finger drag to pan
• Touch-friendly button sizes (44px+ targets)
• Swipe-up panel for mobile node graph
• All drawing and animation tools work on touchscreen

Theme

Dark cyber/neon theme with three canvas background options (Dark, Light, White):

• Primary: #5b8af5 (blue)
• Secondary: #f59b5b (orange)
• Tertiary: #5bf5a0 (green)
• Accent: #ff4466 (motion path red)
• Fonts: DM Sans (UI), JetBrains Mono (code/values)

Important Notes

• Single HTML file - No build step, no dependencies, no server required
• Browser-based - Works in Chrome, Firefox, Edge, Safari
• SVG rendering - All shapes rendered as native SVG for crisp output at any zoom
• Undo history - Up to 50 steps, fully undoable
• Project files (.nvec) - JSON format, human-readable, version-trackable
• Backwards compatible - Opens legacy NodeVector project files

---

Motion Loom - A product by Patchwork Animation © 2026